/**
 * @file PhoneInput.tsx
 * @description 手机号输入组件，包含格式验证
 */

'use client'

import { Input } from 'antd'
import { MobileOutlined } from '@ant-design/icons'
import { useAuth } from '@/app/context/auth-context'

/**
 * @component PhoneInput
 * @description 手机号输入组件，提供手机号格式验证和UI展示
 * @returns {JSX.Element} 手机号输入框
 */
export default function PhoneInput() {
  const { phone, setPhone, phoneError } = useAuth()

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value
    // 只允许输入数字
    if (/^\d*$/.test(value)) {
      setPhone(value)
    }
  }

  return (
    <div className="mb-4">
      <Input
        value={phone}
        onChange={handleChange}
        status={phoneError ? 'error' : ''}
        prefix={<MobileOutlined />}
        placeholder="请输入手机号"
        size="large"
        maxLength={11}
        type="tel"
      />
      {phoneError && (
        <div className="mt-1 text-red-500 text-sm">{phoneError}</div>
      )}
    </div>
  )
} 